<template>
    <Row id="chat" type="flex" justify="center">
        <Col class="side-bar">
            <Row style="padding: 16px 16px 8px 16px">
                <Col class="avatar">
                    <Avatar shape="square" icon="md-person" />
                </Col>
                <Col class="info nick-name">
                    {{this.$util.getWebImNickName()}}
                </Col>
            </Row>
            <Row>
                <Col>
                    <Tabs :animated="false" v-model="selectType" >
                        <TabPane icon="md-text" name="1">
                            <chat-conversation-list ref="conversationList"
                                                    :conversationData="conversationList"
                                                    @on-select="selectConversation"></chat-conversation-list>
                        </TabPane>
                        <TabPane icon="md-person" name="2">
                            <chat-friend-list :data="friendList"
                                              @on-select="selectFriend"></chat-friend-list>
                        </TabPane>
                    </Tabs>
                </Col>
            </Row>
        </Col>
        <Col class="chat-window">
            <chat-window v-show="selectType === '1'"
                         :msgList="selectedMsgList"
                         :username="selectedConversationUsername"
                         @on-send="send"></chat-window>
            <view-friend v-show="selectType === '2'"
                         :username="selectedFriendUsername"
                         @on-send="switchConversation"></view-friend>
        </Col>
    </Row>
</template>

<script>
    import {mapActions} from 'vuex';
    import ChatFriendList from './components/chat-friend-list';
    import ChatConversationList from './components/chat-conversation-list';
    import ChatWindow from './components/chat-window';
    import ViewFriend from './components/view-friend';
    export default {
        name: 'Chat',
        components: {ViewFriend, ChatWindow, ChatConversationList, ChatFriendList},
        props: {

        },
        data () {
            return {
                conversationList: [],
                selectedMsgList: [],
                selectedConversationUsername: '',
                selectedFriendUsername: '',
                selectType: '1'
            };
        },
        computed: {
            isConnSuccess () {
              return this.$store.state.chat.isConnSuccess;
            },
            msgObj () {
                return this.$store.state.chat.msgObj;
            },
            friendList () {
                return this.$store.state.chat.friendList;
            },
            newMessage () {
                return this.$store.state.chat.newMessage;
            }
        },
        methods: {
            ...mapActions([
                'sendWebImText',
                'sendWebImFile',
                'readWebImMsg',
                'getWebImFriendList'
            ]),
            selectConversation (item) {
                this.selectedConversationUsername = item.username;
                this.selectedMsgList = this.msgObj[item.username];
                // 设置已读
                this.readWebImMsg(item.username);
            },
            selectFriend (item) {
                this.selectedFriendUsername = item.name;
            },
            send (item) {
                if (item.type !== this.$im.msgType.txt.value) {
                    this.sendWebImFile({ type: item.type, to: item.to, fileInput: item.fileInput });
                } else {
                    this.sendWebImText({ to: item.to, content: item.content });
                }
            },
            switchConversation ({ isNew, message }) {
                // 是否为来自新消息触发
                if (isNew) {
                    // 是否存在当前会话列表
                    let isExist = false
                    for (let i = 0; i < this.conversationList.length; i++) {

                        let item = this.conversationList[i]
                        if (item && item.username === message.username) {
                            // 是否当前选中
                            if (this.selectedConversationUsername === message.username) {
                                // 更新
                                this.conversationList.splice(i, 1, message);
                                this.$refs.conversationList.click(i);
                            } else {
                                // 移动到顶部
                                this.conversationList.splice(i, 1);
                                this.conversationList.unshift(message);
                            }
                            isExist = true;
                            break;
                        }
                    }

                    if (!isExist) {
                        // 在顶部新增
                        this.conversationList.unshift(message);
                        // 是否有选中
                        if (!this.selectedConversationUsername) {
                            this.$refs.conversationList.click(0);
                        } else {
                            // 索引变化导致选中状态错乱，需重置行选中状态
                            this.$refs.conversationList.changeSelectedCellIndex(this.selectedConversationUsername);
                        }
                    }
                } else {
                    // 会话列表是否存在，存在，移动到顶部，不存在，在顶部新增
                    for (let i = 0; i < this.conversationList.length; i++) {

                        let item = this.conversationList[i]
                        if (item && item.username === message.username) {
                            this.conversationList.splice(i, 1)
                            break;
                        }
                    }

                    this.conversationList.unshift(message);
                    this.$refs.conversationList.click(0);

                    // 切换页签
                    this.selectType = '1';
                }
            }
        },
        watch: {
            isConnSuccess (val) {
                if (val) {
                  this.getWebImFriendList().then(res => {

                  });
                }
            },
            newMessage: {
                handler (val) {
                    if (val) {
                        let message = {time: this.$util.dateFormat(new Date(), 'hh:mm'), ...val};
                        this.switchConversation({isNew: true, message});
                    }
                },
                deep: true
            }
        },
        mounted () {
            this.getWebImFriendList().then(res => {

            });
        }
    };
</script>

<style scoped>
    .side-bar {
        background-color: #2e3238;
        float: left;
        width: 300px;
    }
    .chat-window {
        float: left;
        width: 700px;
        background-color: #eee;
    }
    .avatar {
        float:left;
        width: 32px;
    }
    .info {
        float:left;
        width: calc(100% - 32px);
        padding-left: 8px;
    }
    .nick-name {
        height: 32px;
        line-height: 32px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        color: #fff;
        font-size: 16px;
    }
</style>

<style lang="less">
    #chat {
        .ivu-tabs-nav .ivu-tabs-tab {
            width: 150px;
            margin: 0;
            text-align: center;
            font-size: 30px;
            padding: 0;
        }
        .ivu-tabs-nav .ivu-tabs-tab .ivu-icon {
            width: auto;
            height: auto;
            margin: 0;
        }
    }
</style>
